<template>
	<view>
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="input-view">
			<uni-icons type="search" size="22" color="#666666" />
			<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
		</view>
		<!-- #endif -->
		<view class="un-search-hot">
			<view class="un-search-hot-text">
				热门搜索
			</view>
			<view class="un-search-hot1">
				<view v-for="(item,index) in searchlist" :key="index" class="un-search-hot-item" @click="navToSearch(item)">
						<text>{{item}}</text> 
				</view>
			</view>
		</view>
		
		<view class="un-search-history">
			<view class="un-search-history-text">
				搜索历史
			</view>
			<view v-for="(item,index) in history" :key="index" class="un-search-history-item">
				<text class="iconfont icon-lishijilu1 un-icon"></text>
				<text class="un-text">{{item.name}}</text>
				<text class="yticon icon-fork un-icon1" @click="deleHistory(item.id,index)"></text>
			</view>
		</view>
		
		<view class="un-search-foot" v-if="this.history.length!==0">
			<text @click="delaAllHistory">清除搜索历史</text>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				search:'',
				searchlist:["家居服","人字拖","零食","收纳","毛巾"],
				history:[
					{id:1,name:"日本"},
					{id:2,name:"洗发"},
					{id:3,name:"北欧"},
					{id:4,name:"同款"},
					{id:5,name:"保温"},
					{id:6,name:"面膜"},
					{id:7,name:"香薰"},
					{id:8,name:"洗衣"},
				]
			}
		},
		onLoad() {
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			navToSearch(item){
				uni.navigateTo({
					url:'/pages/search/searchResult/searchResult?item='+item
				})
			},
			deleHistory(id,index){
				this.history.splice(index,1);
				console.log(id)
			},
			delaAllHistory(){
				this.history=[]
			}
		},
		onNavigationBarButtonTap(e){
			uni.navigateBack()
		},
		onNavigationBarSearchInputChanged(e) {
			this.search=e.text;
		},
		onNavigationBarSearchInputConfirmed() {
			if(this.search.length===0){
				uni.showToast({
					title:"请输入要搜索的关键字",
					icon:"none"
				})
			}else{
				uni.navigateTo({
					url:'/pages/search/searchResult/searchResult?item='+this.search
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.un-search-hot{
		background-color: #FFFFFF;
		padding: 50upx 0upx 50upx 40upx; 
		border-top: #F2F2F2 solid 1upx;
		border-bottom: #F2F2F2 solid 1upx;
		.un-search-hot-text{
			font-size: 25upx;
			color: #CCCCCC;
			margin-bottom: 40upx;
		}
		.un-search-hot1{
			display: inline-flex;
			.un-search-hot-item{
				border: 1upx solid #E4E4E4;
				width: 140upx;
				height: 60upx;
				line-height: 60upx;
				color: #999999;
				font-size: 25upx;
				margin-right:  20upx;
				border-radius: 50upx;
				text-align: center;
			}
		}
	}
	.un-search-history{
		padding: 50upx 0upx; 
		.un-search-history-text{
			margin-left: 40upx;
			margin-bottom: 40upx;
			color: #CCCCCC;
			font-size: 25upx;
			
		}
		.un-search-history-item{
			padding: 20upx 40upx;
			background-color: #FFFFFF;
			border-top: 1upx solid #F2F2F2;
			position: relative;
			.un-text{
				margin-left: 15upx;
				color: #999999;
				font-size: 28upx;
			}
			.un-icon{
				color: #CCCCCC;
				font-size: 28upx;
				font-weight: 900;
			}
			.un-icon1{
				position: absolute;
				z-index: 1;
				left: 650upx;
				top:30upx;
				color: #CCCCCC;
			}
		}
	}
	.un-search-foot{
		position: fixed;
		bottom: 0upx;
		background-color: #FFFFFF;
		color: #666666;
		font-size: 28upx;
		width: 100%;
		text-align: center;
		height: 90upx;
		line-height: 90upx;
	}
	/* #ifdef MP */
	
	.input-view {
		width: 70%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 112upx;
		line-height: 30px;
	}
	
	.input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
	/* #endif */
</style>
